<!DOCTYPE html>
<html>
    <head>
        <style>
            .test { float: left; margin-right: 25px; }
            .box { height: 50px; width: 50px; }
            .smallbox { height: 40px; width: 40px; }
            .grayer { background: rgb(80, 80, 80); }
            .grayest { background: rgb(0, 0, 0); }
        </style>
    </head>

    <body>
        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>

        <!-- This box is positioned and sized very strangely because of
             https://github.com/servo/servo/issues/16462. For now we diable
             this test until the bug is fixed.
        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 25px; height: 25px;"></div>
        </div>
        -->

        <div style="height: 30px; clear: both;"> </div>

        <div class="test grayest box">
            <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>

        <div style="height: 30px; clear: both;"> </div>

        <div class="test grayest box">
            <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>

        <div style="height: 30px; clear: both;"> </div>

        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>

        <div style="height: 30px; clear: both;"> </div>

        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
        <div class="test grayest box">
            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
        </div>
    </body>
</html>
